<template>
  <el-form
    ref="headForm"
    :model="headData"
    size="mini"
    label-width="50px"
    style="width:800px;"
  >
    <el-row>
      <el-col :span="3">
        <span
          style="color:#0081ff;"
          @dblclick="jumpToCustomerDetails(Constatvariable.customerId)"
          >{{
            initOptionsData["customerMap"][Constatvariable.customerId]
          }}</span
        >
      </el-col>
      <el-col :span="3">
        <span>销售:</span>
        <span>{{
          initOptionsData["userMap"][Constatvariable.salesmanId]
        }}</span>
      </el-col>

      <el-col :span="3">
        <span>操作</span>
        <span>{{
          initOptionsData["userMap"][Constatvariable.operationId]
        }}</span>
      </el-col>
      <el-col :span="5">
        <el-tooltip effect="light" placement="bottom">
          <div slot="content">
            <div
              v-html="Constatvariable['customerRemark']"
              style="max-width:500px;overflow:auto;background: #e1e5e8;font-size: 15px;line-height: 16px;color: #888;max-height: 320px;"
            ></div>
            <!-- <el-table
              :data="customerReamrkData"
              style="width:800px;overflow:auto;"
            >
              <el-table-column prop="remark" label="客户备注" width="360">
              </el-table-column>
            </el-table> -->
          </div>
          <i
            v-if="
              null == Constatvariable['customerRemark'] ||
                Constatvariable['customerRemark'] == ''
            "
            style="font-size:20px"
            @mouseover="initcustomerReamrkData"
            class="el-icon-user-solid"
          ></i>
          <i
            v-else
            style="font-size:20px;color:red"
            @mouseover="initcustomerReamrkData"
            class="el-icon-user-solid"
          ></i>
        </el-tooltip>

        <el-popover placement="bottom" width="600" trigger="hover">
          <el-button type="text" @click="queryDetailShippingTraceByWaybillId"
            >查看更多>>
          </el-button>
          <el-table :data="tableData" class="text-sm" height="300">
            <el-table-column prop="time" label="时间" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="address" label="地点" width="120">
            </el-table-column>
            <el-table-column prop="operationName" label="操作人" width="120">
            </el-table-column>
            <el-table-column prop="track" label="轨迹" width="120">
            </el-table-column>
          </el-table>
          <i
            style="font-size:20px"
            class="el-icon-truck"
            slot="reference"
            @mouseover="queryShippingTraceByWaybillId"
          ></i>
        </el-popover>
        <el-tooltip effect="light" placement="bottom">
          <div slot="content">
            <div
              v-html="Constatvariable.sysRemark"
              style="max-width:500px;overflow:auto;background: #e1e5e8;font-size: 15px;line-height: 16px;color: #888;max-height: 320px;"
            ></div>
            <!-- <el-table
              :data="sysReamrkData"
              style="width:800px;overflow:auto;"
              >
              <el-table-column
                prop="remark"
                label="系统备注"
                width="360">
              </el-table-column>
            </el-table> -->
          </div>
          <i
            style="font-size:20px"
            @mouseover="initSysRemark"
            class="el-icon-s-flag"
          ></i>
        </el-tooltip>
        <el-tooltip effect="light" placement="bottom" content="已锁单">
          <img :src="suoPng" v-if="Constatvariable.orderLocked === 1" />
        </el-tooltip>
      </el-col>
      <el-col
        :span="1"
        v-if="
          !verifyShow.saler &&
            !verifyShow.seller &&
            !verifyShow.saleAssistant &&
            ['seaFreightHD', 'seaFreight'].includes(pageType)
        "
      >
        <template>
          <el-tooltip effect="light" placement="bottom">
            <div slot="content">
              <el-button
                @click="viewWaybillMasterAndHouseNumber(0, 'COPY')"
                type="text"
                >COPY
              </el-button>
              <el-button
                @click="waybillMasterAndHousePdf(0, 'copy')"
                type="text"
                >COPY(PDF)
              </el-button>
              <el-button
                @click="viewWaybillMasterAndHouseNumber(0, 'SURRENDERED')"
                type="text"
                >SURRENDERED
              </el-button>
              <el-button
                @click="waybillMasterAndHousePdf(0, 'surrendered')"
                type="text"
                >SURRENDERED(PDF)
              </el-button>
            </div>
            <i>M单</i>
          </el-tooltip>
        </template>
      </el-col>
      <el-col
        :span="2"
        v-if="
          !verifyShow.saler && !verifyShow.seller && !verifyShow.saleAssistant
        "
      >
        <el-tooltip effect="light" placement="top">
          <div slot="content">
            <el-button type="text" @click="exportBookingDocx(0)"
              >导出DOC</el-button
            >
            <el-button type="text" @click="exportBookingDocx(1)"
              >导出PDF</el-button
            >
          </div>
          <i>Booking</i>
        </el-tooltip>
      </el-col>
      <el-col :span="3">
        <div
          class="text-lg pointer"
          @click="toAbroad(Constatvariable.abroadWaybillNo)"
        >
          {{ Constatvariable.abroadWaybillNo }}
        </div>
      </el-col>
    </el-row>
    <el-row style="padding: 10px 0;">
      <el-col :span="3" class="text-cut">
        <el-tooltip
          effect="light"
          placement="bottom"
          :content="Constatvariable.referenceNo"
        >
        </el-tooltip>
        <span>{{ Constatvariable.referenceNo }}</span>
        <div v-if="customerSpecial!=null&&customerSpecial!=''">
          <el-tooltip effect="light" placement="left">
            <div slot="content">
              <div
                v-html="customerSpecial"
                style="max-width:500px;overflow:auto;background: #e1e5e8;font-size: 15px;line-height: 16px;color: #888;max-height: 320px;"
              ></div>
            </div>
            <template v-if="temp==1">
              <img :src ="specialPng" @click="findSpecial"/>
            </template>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="3">
        <span>客服:</span>
        <span>{{
          initOptionsData["userMap"][Constatvariable.servicesId]
        }}</span>
      </el-col>
      <el-col :span="3">
        <span
          >海外:{{
            initOptionsData["userMap"][Constatvariable.overseasOperatorId]
          }}</span
        >
      </el-col>
      <el-col :span="5">
        <el-tooltip effect="light" content="起运港账单" placement="top">
          <img v-if="yesbillstatus" :src="yesbillstatus" />
        </el-tooltip>
        <el-tooltip effect="light" content="目的港账单" placement="top">
          <img v-if="portdestination0" :src="portdestination0" />
        </el-tooltip>

        <el-tooltip
          effect="light"
          content=""
          placement="top"
          v-if="mergerdeclarations"
        >
          <div slot="content">
            <el-row v-for="item in mergerDeclarationNos" :key="item">
              <el-col>
                <span>{{ item }}</span>
              </el-col>
            </el-row>
          </div>
          <img
            v-if="mergerdeclarations"
            :src="mergerdeclaration"
            @mouseover="
              asyncLoadingOtherWaybillNo(Constatvariable.mergerDeclarationNo)
            "
          />
        </el-tooltip>

        <el-tooltip effect="light" content="" placement="top">
          <img
            v-if="payforcustomsdeclaration"
            :src="payforcustomsdeclaration"
          />
        </el-tooltip>
        <el-tooltip effect="light" content="" placement="top">
          <img
            v-if="payforcustomsdeclarationgreen"
            :src="payforcustomsdeclarationgreen"
          />
        </el-tooltip>
        <el-tooltip effect="light" content="" placement="top">
          <img v-if="waybillyesvat" :src="waybillyesvat" />
        </el-tooltip>
        <el-tooltip effect="light" content="" placement="top">
          <img v-if="isbuyinsurance" :src="isbuyinsurance" />
        </el-tooltip>
        <el-tooltip effect="light" content="" placement="top">
          <img
            :src="
              Constatvariable.onlineInquiryReplyId
                ? onlineinqury1
                : onlineinqury0
            "
            @click="toOnlineInquiry(Constatvariable.onlineInquiryReplyId)"
          />
        </el-tooltip>

        <el-tooltip
          effect="light"
          content=""
          placement="top"
          v-if="null != Constatvariable.isPVA"
        >
          <img v-if="ispva0" :src="ispva0" />
        </el-tooltip>
      </el-col>
      <el-col
        :span="1"
        v-if="
          !verifyShow.saler &&
            !verifyShow.seller &&
            !verifyShow.saleAssistant &&
            ['seaFreightHD', 'seaFreight'].includes(pageType)
        "
      >
        <template>
          <el-tooltip effect="light" placement="top">
            <div slot="content">
              <el-button
                @click.native="viewWaybillMasterAndHouseNumber(1, 'COPY')"
                type="text"
                >COPY
              </el-button>
              <el-button
                @click.native="waybillMasterAndHousePdf(1, 'copy')"
                type="text"
                >COPY(PDF)1
              </el-button>
              <el-button
                @click.native="
                  viewWaybillMasterAndHouseNumber(1, 'SURRENDERED')
                "
                type="text"
                >SURRENDERED
              </el-button>
              <el-button
                @click="waybillMasterAndHousePdf(1, 'surrendered')"
                type="text"
                >SURRENDERED(PDF)
              </el-button>
            </div>
            <i>H单</i>
          </el-tooltip>
        </template>
      </el-col>
      <el-col :span="1">
        <seaairlist
          ref="seaairlist"
          :data="Constatvariable"
          :editRules.sync="rules"
          @editWaybillInfo='editWaybillInfo'
          v-if="showRules"
        ></seaairlist>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { m } from "@/store/yg/common/local";
import specialPng from "@/assets/images/special-1.png";
import suoPng from "@/assets/images/suo.png";

import yesbillstatusPng from "@/assets/images/yesbillstatus.png";
import nobillstatusPng from "@/assets/images/nobillstatus.png";
import portdestination0Png from "@/assets/images/portdestination0.png";
import portdestination1Png from "@/assets/images/portdestination1.png";
import ispva1Png from "@/assets/images/ispva1.png";
import ispva0Png from "@/assets/images/ispva0.png";
import isbuyinsurancePng from "@/assets/images/isbuyinsurance.png";
import nobuyinsurancePng from "@/assets/images/nobuyinsurance.png";
import mergerdeclarationPng from "@/assets/images/mergerdeclaration.jpeg";
import waybillyesvatPng from "@/assets/images/waybillyesvat.png";
import waybillnovatPng from "@/assets/images/waybillnovat.png";
import waybillredvatPng from "@/assets/images/waybillredvat.png";
import onlineinqury1Png from "@/assets/images/onlineinqury1.png";
import onlineinqury0Png from "@/assets/images/onlineinqury0.png";
import payforcustomsdeclarationPng from "@/assets/images/payfor_customs_declaration.png";
import payforcustomsdeclarationbluePng from "@/assets/images/payforcustomsdeclarationblue.png";
import payforcustomsdeclarationgreenPng from "@/assets/images/payforcustomsdeclarationgreen.png";
import twomixdeclarationPng from "@/assets/images/two_mix_declaration.png";
import generalgreendeclarationPng from "@/assets/images/general_green_declaration.png";
import generalbusinessdeclarationPng from "@/assets/images/general_business_declaration.png";
import MiddleUtil from "@/utils/MiddleUtil";
const seaairlist = () =>
  import("@/components/app/main/waybill/operation/seaairlist");

export default {
  components: {
    seaairlist
  },
  props: {
    pageType: {
      type: String,
      required: true,
      default: "seaFreight"
    },
    verifyShow: {
      type: Object,
      default: function() {
        return {};
      }
    },
    Constatvariable: {
      type: Object,
      default: function() {
        return {};
      }
    },
    initOptionsData: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      temp:0,
      specialPng:specialPng,
      customerSpecial:"",
      waybillId: "",
      isWay: false,
      tableData: [],
      sysReamrkData: [],
      customerReamrkData: [],
      // 锁
      suoPng: suoPng,

      // 询
      onlineinqury1: onlineinqury1Png,
      // 询
      onlineinqury0: onlineinqury0Png,
      //  起 - yes
      yesbillstatus: yesbillstatusPng,
      nobillstatus: nobillstatusPng,
      //  目
      portdestination0: portdestination0Png,
      portdestination1: portdestination1Png,
      // PVA
      ispva1: ispva1Png,
      ispva0: ispva0Png,

      isbuyinsurance: isbuyinsurancePng,
      nobuyinsurance: nobuyinsurancePng,

      // 合
      mergerdeclaration: mergerdeclarationPng,
      mergerdeclarations: true,

      // VAT
      waybillyesvat: waybillyesvatPng,
      waybillnovat: waybillnovatPng,
      waybillredvat: waybillredvatPng,

      // 报
      payforcustomsdeclaration: payforcustomsdeclarationPng,
      payforcustomsdeclarationblue: payforcustomsdeclarationbluePng,
      payforcustomsdeclarationgreen: "",
      generalgreendeclaration: generalgreendeclarationPng,
      generalbusinessdeclaration: generalbusinessdeclarationPng,
      rules: {},
      mergerDeclarationNos: [],
      showRules: false,
      headData: {},
      tarckInfo: [],
      resModel: {
        estimatedDepartureTime: "",
        boxType: "",
        defaultBoxType: "",
        totalNumberOfContainersOfPackages: "",
        containerInformationList: "",
        simpleWaybillQuery: "",
        billType: "",
        operationType: "",
        packageType: "",
        configPortMap: {},
        configShipMap: {},
        waybillId: ""
      }
    };
  },
  watch: {
    Constatvariable: {
      handler(newValue, oldValue) {
        this.waybillId = newValue.id;
        this.init();
        this.initRules();

        if (
          this.Constatvariable.shippingWay === "FCL" ||
          this.Constatvariable.shippingWay == "LCL"
        ) {
          this.isWay = true;
        } else if (
          this.Constatvariable.shippingWay == "AIR" ||
          this.Constatvariable.shippingWay == "ZX"
        ) {
          this.isWay = false;
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    findSpecial(){
      var shippingWay=this.Constatvariable.shippingWay;
      var countryIds=this.Constatvariable.countryId;
      if (shippingWay=="99"){
        console.log("快递")
        shippingWay="EXPRESS"
      }
      if (shippingWay=="LCL"||shippingWay=="FCL"||shippingWay=="LCLG"||shippingWay=="FCLG"){
        console.log("海运")
        shippingWay="OCEAN"
      }
      if (shippingWay=="AIR"||shippingWay=="ZX"){
        console.log("空运")
        shippingWay="AIRLIFT"
      }
      let n = [
        {
          field: "shippingWay",
          value: shippingWay,
        },
        {
          field:"countryIds",
          value: countryIds,
        }
      ];
      let node = JSON.stringify(n);
      console.log("参数",node)
      window.open("/#/main/setting__customerspecialscenecontent__list?node="+node,
        "_blank");
    },
    initSpecial(){
      var params = {};
      params["customerId"]=this.Constatvariable["customerId"];
      params["shippingWay"]=this.Constatvariable["shippingWay"];
      params["countryId"]=this.Constatvariable["countryId"];
      ajax("findSpecialAll", params).then(
        res => {
          if (res.code == 200) {
            this.temp=1;
            this.customerSpecial = res.data;
          }
        },
        error => {
          console.log(error);
        }
      );

    },
    async toAbroad(no) {
      MiddleUtil.$emit("toSearch", no);
    },
    toOnlineInquiry(id) {
      console.log("id :>> ", id);
      if (!id) return;
      // 跳转询价页面
      window.open(
        "/#/blank/waybill__viewOnlineInquiryAndReplys__main?replyId=" + id
      );
    },
    initRules() {
      this.rules = {};
      if (this.showRules) {
        return;
      }
      var uri = "/waybill/seafreightlist/list";
      if (
        this.Constatvariable.shippingWay == "AIR" ||
        this.Constatvariable.shippingWay == "ZX"
      ) {
        uri = "/waybill/airfreightlist/list";
      } else if (
        this.Constatvariable.shippingWay == "LCL" ||
        this.Constatvariable.shippingWay == "FCL"
      ) {
        var uri = "/waybill/seafreightlist/list";
      } else if (this.Constatvariable.shippingWay == "99") {
        uri = "/waybill/expressdelivery/list";
      } else if (this.Constatvariable["examineAndApprove"] == 0) {
        uri = "/waybill/approvalpending/list";
      }
      let mainUri = "/api/entry/main?uri=" + uri;
      axios
        .post(constant.API_SERVER + mainUri)
        .then(response => {
          response.data.table.action.forEach(element => {
            if (element.displayRule) {
              this.rules[element.client.commit] = element.displayRule;
            }
          });
          //this.$refs.seaairlist.displayRules();
          this.showRules = true;
        })
        .catch(error => {
          console.log(error);
        });
    },
    jumpToCustomerDetails(id) {
      window.open("/#/main/customer__info__list?id=" + id, "_blank");
    },
    asyncLoadingOtherWaybillNo(mergerDeclarationNo) {
      var params = {};
      params["id"] = this.waybillId;
      params["code"] = mergerDeclarationNo;
      ajax("asyncLoadingOtherWaybillNo", params).then(
        res => {
          if (res.code == 200) {
            this.mergerDeclarationNos = res.data;
            //跳转到新页面
          } else {
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    queryDetailShippingTraceByWaybillId() {
      var url = "#/blank/waybill__waybillTrackInfo__main";
      url = url + "?waybillId=" + this.$route.query.waybillId + "&type=" + 0;
      window.open(url, "_blank");
    },
    queryShippingTraceByWaybillId() {
      var params = {};
      params["id"] = this.waybillId;
      ajax("queryShippingTraceByWaybillId", params).then(
        res => {
          if (res.code == 200) {
            this.tableData = res.data;
            //跳转到新页面
          } else {
            this.tableData.push("暂时没有物流信息，请耐心等待");
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    editWaybillInfo() {
      this.$emit('editWaybillInfo')
    },
    exportBookingDocx(type) {
      var params = {};
      params["id"] = this.waybillId;
      params["status"] = type;
      ajax("exportBookingDocx", params).then(
        res => {
          console.log("下載Booking", res);
          if (null != res.message && res.message != "") {
            this.$message.error(res.message);
          } else {
            var path = constant.FILE_SERVER + res.path;
            location.href =
              constant.API_SERVER +
              "/open/downloadFileByHttp?fileName=" +
              res.fileName +
              "&path=" +
              path;
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    waybillMasterAndHousePdf(billType, operationType) {
      var params = {};
      var ids = [];
      ids.push(this.waybillId);
      params["billType"] = billType;
      params["operationType"] = operationType;
      params["ids"] = ids;
      ajax("waybillMasterAndHouseNumberLoading", params).then(
        res => {
          console.log("下载PDF", res);
          if (null != res.message && res.message != "") {
            this.$message.error(m(res.message));
          } else {
            var path = constant.FILE_SERVER + res.path;
            location.href =
              constant.API_SERVER +
              "/open/downloadFileByHttp?fileName=" +
              res.fileName +
              "&path=" +
              path +
              res.fileName;
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    viewWaybillMasterAndHouseNumber(billType, operationType) {
      console.log("billType :>> ", billType);
      console.log("operationType :>> ", operationType);
      var url =
        "/#/view/waybillMasterAndHouseNumber?waybillId=" +
        this.$route.query.waybillId;
      url = url + "&billType=" + billType + "&operationType=" + operationType;
      console.log("url :>> ", url);
      window.open(url);
    },
    initcustomerReamrkData() {
      this.customerReamrkData = [];
      var systemReamrks = this.Constatvariable["customerRemark"];
      if (systemReamrks) {
        var remarks = systemReamrks.split("<br/>");
        remarks.forEach(element => {
          var sysRemark = {};
          sysRemark["remark"] = element;
          this.customerReamrkData.push(sysRemark);
        });
      }
    },

    initSysRemark() {
      this.sysReamrkData = [];
      var systemReamrks = this.Constatvariable["sysRemark"];
      if (systemReamrks) {
        var remarks = systemReamrks.split("<br/>");
        remarks.forEach(element => {
          var sysRemark = {};
          sysRemark["remark"] = element;
          this.sysReamrkData.push(sysRemark);
        });
      }
    },

    async checkUploadCustomsDeclaration() {
      const data = await ajax("checkUploadCustomsDeclaration", {
        id: this.waybillId
      });
      if (data.data) {
        this.payforcustomsdeclaration = generalgreendeclarationPng;
      } else {
        this.payforcustomsdeclaration = generalbusinessdeclarationPng;
      }
      if (data.data2) {
        this.payforcustomsdeclarationgreen = payforcustomsdeclarationgreenPng;
      }
    },


    init() {
      const selfDelivered = this.Constatvariable["selfDelivered"];
      const isShowTDpic = this.Constatvariable["isShowTDpic"];
      const billStatus = this.Constatvariable["billStatus"];
      const portOfDestinationBillStatus = this.Constatvariable[
        "portOfDestinationBillStatus"
      ];
      const isCustomerDeclaration = this.Constatvariable[
        "isCustomerDeclaration"
      ];
      const isPVA = this.Constatvariable["isPVA"];
      const isVatAndEori = this.Constatvariable["isVatAndEori"];
      const eoriIsCertified = this.Constatvariable["eoriIsCertified"];
      const isBuyInsurance = this.Constatvariable["isBuyInsurance"];
      const mergerDeclarationNo = this.Constatvariable["mergerDeclarationNo"];
      this.initShow(
        selfDelivered,
        isShowTDpic,
        billStatus,
        portOfDestinationBillStatus,
        isCustomerDeclaration,
        isPVA,
        isBuyInsurance,
        mergerDeclarationNo,
        isVatAndEori,
        eoriIsCertified
      );
    },

    initShow(
      selfDelivered,
      isShowTDpic,
      billStatus,
      portOfDestinationBillStatus,
      isCustomerDeclaration,
      isPVA,
      isBuyInsurance,
      mergerDeclarationNo,
      isVatAndEori,
      eoriIsCertified
    ) {
      if (null != billStatus && billStatus == 1) {
        this.yesbillstatus = yesbillstatusPng;
      } else {
        this.yesbillstatus = nobillstatusPng;
      }

      if (
        null != portOfDestinationBillStatus &&
        portOfDestinationBillStatus == 0
      ) {
        this.portdestination0 = portdestination0Png;
      } else {
        this.portdestination0 = portdestination1Png;
      }

      if (null != isPVA && isPVA == 1 && this.Constatvariable["isTaxFarming"] ===0) {
        this.ispva0 = ispva1Png;
      } else {
        this.ispva0 = ispva0Png;
      }

      if (isVatAndEori == 1 && eoriIsCertified == 1) {
        this.waybillyesvat = waybillyesvatPng;
      } else if (
        (isVatAndEori == 1 && eoriIsCertified == 0) ||
        (isVatAndEori == 1 && eoriIsCertified == null)
      ) {
        this.waybillyesvat = waybillredvatPng;
      } else {
        this.waybillyesvat = waybillnovatPng;
      }

      // 42 43 兼容老数据
      if (isCustomerDeclaration == 0 || isCustomerDeclaration == 42) {
        this.payforcustomsdeclaration = payforcustomsdeclarationPng;
      } else if (isCustomerDeclaration == 1 || isCustomerDeclaration == 43) {
        this.checkUploadCustomsDeclaration();
      } else {
        this.payforcustomsdeclaration = twomixdeclarationPng;
      }

      if (null != isBuyInsurance && isBuyInsurance == 1) {
        this.isbuyinsurance = isbuyinsurancePng;
      } else {
        this.isbuyinsurance = nobuyinsurancePng;
      }
      console.log("mergerDeclarationNo"+mergerDeclarationNo)
      if (!mergerDeclarationNo) {
        this.mergerdeclarations = false;
      }
    },

  },

  mounted() {
    this.initSpecial();
    // this.waybillId = this.$route.query.waybillId;
    // console.log("this.waybillId :>> ", this.waybillId);
    // if (
    //   this.Constatvariable.shippingWay === "FCL" ||
    //   this.Constatvariable.shippingWay == "LCL"
    // ) {
    //   this.isWay = true;
    // } else if (
    //   this.Constatvariable.shippingWay == "AIR" ||
    //   this.Constatvariable.shippingWay == "ZX"
    // ) {
    //   this.isWay = false;
    // }
    // this.initRules();
  }
};
</script>

<style></style>
